<template>
  <div>
    <el-form label-width="80px" size="small" @submit.native.prevent>
      <el-form-item label="流程表单">
        <el-select v-model="bpmnFormData.formKey" clearable class="m-2" placeholder="挂载节点表单" @change="updateElementFormKey">
          <el-option
              v-for="item in formList"
              :key="item.value"
              :label="item.formName"
              :value="item.formId"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, watch, inject, getCurrentInstance } from 'vue';
import { listAllForm } from '@/api/flowable/form';
import { StrUtil } from "@/utils/StrUtil";

// 属性定义
const props = defineProps({
  id: {
    type: String,
    required: true
  }
});

// 注入modelerStore
// const modelerStore = inject('modelerStore');

const { proxy } = getCurrentInstance();
const modelerStore = proxy.modelerStore;

// 状态定义
const formList = ref([]); // 表单数据
const bpmnFormData = reactive({});

// 重置流程表单
const resetFlowForm = () => {
  bpmnFormData.formKey = modelerStore.element.businessObject.formKey;
};

// 更新表单KEY
const updateElementFormKey = (val) => {
  if (StrUtil.isBlank(val)) {
    delete modelerStore.element.businessObject[`formKey`];
  } else {
    modelerStore.modeling.updateProperties(modelerStore.element, {'formKey': val});
  }
};

// 获取表单信息
const getListForm = () => {
  listAllForm().then(res => {
    res.data.forEach(item => {
      item.formId = item.formId.toString();
    });
    formList.value = res.data;
  });
};

// 监听ID变化
watch(() => props.id, (newVal) => {
  if (StrUtil.isNotBlank(newVal)) {
    // 加载表单列表
    getListForm();
    resetFlowForm();
  }
}, { immediate: true });

</script>
